<template>
  <div class="portal-con">
    <div class="portal-header">
      <span class="title">我的网站</span>
      <Dropdown
        @on-click="handleDropClick"
        style="float: right"
        data-test="dropdown"
      >
        <span class="user-opera">
          <Icon type="md-person" />
          {{ userInfo.username }}
        </span>
        <DropdownMenu slot="list">
          <DropdownItem name="登出">
            <Icon type="md-power" />登出
          </DropdownItem>
          <DropdownItem name="修改密码">
            <Icon type="md-create" />修改密码
          </DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </div>
    <div class="portal-sys">
      <div
        class="sys-item"
        v-for="item in systems"
        :key="item.id"
        @click="handleClick(item.name)"
      >
        <div class="sys-logo">
          <span class="sys-icon">
            <span class="sysicon" :class="item.icon.split(',')"></span>
          </span>
        </div>
        <div class="title">{{ item.title }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Portal",
  data() {
    return {
      userInfo: this.$store.getters.userInfo,
    };
  },
  computed: {
    systems() {
      let res = [];
      let resource = this.$store.getters.resource;
      res = resource.map((item) => {
        let {
          id,
          name,
          meta: { title, icon },
        } = item;
        return {
          id,
          name,
          title,
          icon,
        };
      });
      return res;
    },
  },
  methods: {
    logOut() {
      this.$store.dispatch("logOut");
      this.$router.push({
        name: "Login",
      });
    },
    handleDropClick(name) {
      switch (name) {
        case "登出":
          this.logOut();
          break;
        case "修改密码":
          break;
      }
    },
    handleClick(name) {
      this.$store.commit("loading", true);
      this.$router.push({
        name,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.portal-con {
  width: 100%;
  height: 100%;
  background-image: url(../assets/imgs/bg3.jpg);
  background-size: 100% 100%;
  position: relative;
  overflow: hidden;
  padding: 0 10%;
  .portal-header {
    color: white;
    font-size: 40px;
    padding-top: 50px;
    text-align: left;
    .user-opera {
      font-size:30px;
      cursor: pointer;
    }
  }
  .portal-sys {
    width: 100%;
    position: absolute;
    bottom: 50px;
    left: 0;
    display: flex;
    background: unset;
    flex-wrap: wrap;
    padding: 0 15%;
    .sys-item {
      width: calc(25% - 30px);
      background-color: white;
      cursor: pointer;
      border-radius: 10px;
      border-left: 8px solid rgb(3, 187, 255);
      margin-right: 30px;
      margin-bottom: 30px;
      text-align: left;
      padding: 10px 0;
      max-height: 150px;
      .sys-logo {
        width: 100%;
        .sys-icon {
          font-size: 50px;
          padding-left: 15px;
        }
      }
      .title {
        line-height: 50px;
        height: 50px;
        font-size: 25px;
        padding-left: 20px;
      }
    }
    .sys-item:hover {
      background-color: rgb(3, 187, 255);
      color: white;
    }
  }
}
</style>
